<template>
	<view>
		<p-navbar></p-navbar>
		<view class="title">
			<view>修改安全密码</view>
		</view>
		<view class="form">
			<view class="item" v-for="(item, index) in node" :key="item.key">
				<view class="label" :class="[`icon-${item.icon}`]">{{ item.label }}</view>
				<view class="content">
					<input class="input" :placeholder="item.msg" :maxlength="item.len" :type="item.type" v-model="form[item.key]"
					 @keyup.enter="fnForget" />
					<view class="password" :class="{ show: item.type === 'text' }" v-if="item.icon === 'password'" @tap="fnPsw(index)"></view>
					<view class="code" :class="{ disabled: !codeClick }" v-if="item.key === 'sms_code'" @tap="getMsmCode">{{ codeText }}</view>
				</view>
			</view>
		</view>
		<view class="submit">
			<u-button type="primary" ripple :loading="loading" shape="circle" @tap="fnForget" :style="{'background':disabled?'#F3C31B':''}">确认修改</u-button>
		</view>
		<!-- <view class="tips">
			<view class="titles">温馨提示：</view>
			<text>关键资产操作的时候需要用到交易密码，请牢记你的交易密码并且不要透露给任何人</text>
			 <text>2：请再次确认您的提币地址是否正确，务必确认电脑及浏览器安全，防止信息被篡改或泄露</text> 
		 </view> -->
	</view>
</template>

<script>
	import {
		getCode
	} from '@/utils/mixins';
	export default {
		data() {
			return {
				node: [
					// {
					// 		key: 'password',
					// 		label: '原安全密码',
					// 		msg: '请输入原安全密码',
					// 		icon: 'password',
					// 		type: 'password',
					// 		len: 15
					// 	},
					{
					  key: 'phone',
					  label: '手机号码',
					  msg: '请输入手机号码',
					  icon: 'phone',
					  type: 'text',
					  len: 20
					},
					{
					  key: 'sms_code',
					  label: '验证码',
					  msg: '请输入手机短信验证码',
					  icon: 'code',
					  type: 'text',
					  len: 6
					},
					{
					  key: 'userName',
					  label: '账号',
					  msg: '请输入账号',
					  icon: 'userName',
					  type: 'text',
					  len: 20
					},
						{
						key: 'transaction',
						label: '新安全密码',
						msg: '请输入新密码',
						icon: 'password',
						type: 'password',
						len: 15
					},
					{
						key: 'p_transaction_password',
						label: '确认新密码',
						msg: '请确认新密码',
						icon: 'password',
						type: 'password',
						len: 15
					},
				],
				form: {}, // 表单内容
				showPsw: false, // 是否显示密码
				loading: false // 注册加载中
			}
		},
		mixins: [getCode],
		watch: {
			showPsw(val) {
				const type = val ? 'text' : 'password'
				this.$set(this.node[1], 'type', type)
			}
		},
		computed: {
			// 注册按钮是否禁止点击
			disabled() {
				// console.log(this.form.password && this.form.transaction && this.form.p_transaction_password)
				if (this.form.transaction && this.form.p_transaction_password && this.form.sms_code) {
					// this.loading=true
					return true;
				} else {
					return false
				}

			},
		},
		methods: {
			// 忘记密码
			fnForget() {
				console.log(this.disabled, this.loading)
				if (!this.disabled || this.loading) return
				if (this.form.transaction !== this.form.p_transaction_password) return this.util.toast('两次密码不一致')
				
				this.loading = true
				this.request('restSecurityPwd', {
						...this.form,
						authCode:this.form.sms_code,
						securityPassword: this.form.transaction,
						phone:this.form.phone,
						userName:this.form.userName,
					})
					.then(res => {
						if (res.data.code === 1) {
							this.util.toast('修改密码成功', 'success')
							uni.$emit('login', this.form.phone)
							setTimeout(() => {
								this.util.router.back()
							}, 1000)
						}else{
							this.util.toast(res.data.msg)	
						}
						this.loading = false
					})
					.catch(err => {
						this.loading = false
					})
			},
			// 显示或隐藏密码
			fnPsw(i) {
				const type = this.node[i].type
				this.$set(this.node[i], 'type', type === 'password' ? 'text' : 'password')
			},
			// 获取短信验证码
			getMsmCode(){
				if(!this.form.phone) return this.util.toast('请输入手机号码');
				if(!this.$u.test.mobile(this.form.phone)) return this.util.toast('请输入正确的手机号码');
				if (!this.codeClick) return
				this.getCode(this.form.phone,2)
			}
		},
		onLoad() {
		}
		
	}
</script>

<style lang="scss">
	.title {
		padding: 60rpx 60rpx 10rpx 60rpx;

		view:nth-child(1) {
			font-size: 38rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
	}

	.form {
		padding: 0 40rpx;
	}

	.tips {
		text-align: left;
		font-size: 24rpx;
		margin: 0 0rpx;
		padding: 0rpx 40rpx;
		width: 95%;
		color: #333333;

		.titles {
			// color: $text-regular;
			font-weight: bold;
			margin-bottom: 20rpx;
			font-size: 30rpx;
			color: #fff;
		}

		text {
			// color: $text-regular;
			display: block;
			font-size: 20rpx;
			color: rgba(255, 255, 255, 0.3);
			margin-bottom: 20rpx;
			line-height: 1.4;
		}
	}

	.item {
		
		padding-top: 40rpx;

		.content {
			@include flex;
			background-color: #FFFFFF;
			border-radius: 18rpx;
// border: 2rpx solid rgba(22, 119, 255, 0.05);

		}

		.label {
			height: 40rpx;
			font-size: 28rpx;
			padding-left: 20rpx;
			background-size: 36rpx 40rpx;
			background-position: 0 center;
			background-repeat: no-repeat;
			line-height: 40rpx;
			$icon: phone password code invite;

			@each $c in $icon {
				&.icon-#{$c} {
					// background-image: url("~@/static/login-icon-#{$c}.png");
				}
			}
		}

		.input {
			font-size: 25rpx;
			height: 100rpx;
			padding: 0 30rpx 0 20rpx;
			flex: 1;
			background: none;
			border: none;
			outline: none;
			// color: #fff;
		}

		.password {
			width: 32rpx;
			height: 16rpx;
			background-image: url("~@/static/user/login-psw-hide.png");
			@include background;
			margin-right: 50rpx;
			@include click;

			&.show {
				height: 24rpx;
				background-image: url("~@/static/user/login-psw-show.png");
			}
		}

		.code {
			font-size: 24rpx;
			color: $light-color;
			margin-right: 50rpx;
			@include click;

			&.disabled {
				color: #CACACA;
			}
		}
	}

	.submit {
		margin: 60rpx 64rpx;

		/deep/ .u-btn {
			background-color: rgba(#e0e0e0,1);
			// box-shadow: 0 17rpx 40rpx rgba(38, 109, 245, .3);
			transition: .3s;
			height: 90rpx;
			border-radius: 20rpx;

			// border-radius: 10rpx;
			&[disabled] {

				box-shadow: none !important;
				background-color: $light-color !important;
			}

			/deep/ .u-round-circle::after {
				/* border-radius: 50px; */
				border-radius: 20rpx;
			}
		}

		/deep/ .u-round-circle::after {
			border-radius: 20rpx;
		}
	}

	.agreement {
		margin-top: 50rpx;
		padding-bottom: 60rpx;
		text-align: center;
		font-size: 24rpx;
		color: #D7D7D7;

		text {
			color: #266DF5;
		}
	}
</style>
